<!-- 课程必/选修标签 组件 -->

<template>
	<!-- 渐变色容器 -->
	<view :class="type==1 ? 'tag-course-box-red' : 'tag-course-box-yellow'">
		<!-- 标签文字 -->
		<focus-box mode="row" justify="center" align="center">
			<!-- 自定义文字 -->
			<text v-if="text" class="tag-course-font-show">{{text}}</text>
			<!-- 必修 -->
			<text v-else-if="type==1" class="tag-course-font-show">必修</text>
			<!-- 选修 -->
			<text v-else class="tag-course-font-show">选修</text>
		</focus-box>
		
	</view>
</template>

<script>
	/**
	 * 课程必/选修标签组件
	 * @description 课程必/选修标签组件，杜先生开发
	 * @property {String} tag 组件标识，默认：tag-course
	 * @property {String,Number} type = [0|1] 标签类型，默认：0
	 *   @value 0 选修，默认
	 *   @value 1 必修
	 * @property {String} text 标签文字，如果不填，则使用默认
	 */
	export default {
		name: "tag-course",
		props: {
			tag: { type: String, default: 'tag-course' },
			type: { type: [String,Number], default: 0 },
			text: { type: String, default: null },
		},
	}
</script>

<style>
	/* 红色渐变标签背景容器 */
	.tag-course-box-red{
		padding-left: 12rpx; padding-right: 12rpx;
		background-image: linear-gradient(224deg, #FB6F3F 0%, #FE3001 100%);
		border-radius: 6rpx;
	}
	/* 黄色渐变标签背景容器 */
	.tag-course-box-yellow{
		padding-left: 12rpx; padding-right: 12rpx;
		background-image: linear-gradient(223deg, #FBA43F 0%, #FC8C4F 100%);
		border-radius: 6rpx;
	}
	/* 标签显示文字 */
	.tag-course-font-show{
		font-size: 20rpx; line-height: 30rpx;
		color: white;
		white-space: nowrap;
	}
</style>